<template xmlns:font-family="http://www.w3.org/1999/xhtml">
  <div id="login-bg">
    <div class="register-model">
      <el-row>
        <el-col><span><h2>手机号注册</h2></span></el-col>
      </el-row>
      <el-form class="center" :model="registerForm" :rules="rules" ref="registerForm">
        <el-form-item prop="username">
          <el-input type="text" placeholder="请输入您的姓名" v-model="registerForm.username"/>
        </el-form-item>
        <el-form-item prop="mobile">
          <el-input type="tel" placeholder="请输入手机号码" v-model="registerForm.mobile"/>
        </el-form-item>
        <el-form-item prop="email">
          <el-input type="email" placeholder="请输入邮箱" v-model="registerForm.email"/>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" autocomplete="off" placeholder="请输入密码" show-password v-model="registerForm.password"/>
        </el-form-item>
        <div class="alert alert-info">
          <strong>密码规则:</strong>
          <ol>
            <li>至少含大写字母个数1</li>
            <li>至少含小写字母个数1</li>
            <li>数字个数最少为1位</li>
            <li>密码最小长度8</li>
          </ol>
        </div>
        <el-form-item prop="password2">
          <el-input type="password" placeholder="请输入确认密码" autocomplete="off"  v-model="registerForm.password2"/>
        </el-form-item>
        <el-form-item label-width="100">
          <el-button type="primary" @click="registerNew('registerForm')" round>注&nbsp;&nbsp;&nbsp;&nbsp;册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {getCurrentInstance, ref} from "vue";
import {ElMessage} from "element-plus";

export default {
  name: "register",
  data() {
    let validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.registerForm.password2 !== '') {
          this.$refs.registerForm.validateField('password2')
        }
        callback()
      }
    }
    let validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.registerForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      registerForm: {
        mobile: ref(''),
        password: ref(''),
        password2: ref(''),
        username: ref(''),
        email: ref('')
      },
      rules: {
        mobile: [
          {required: true, pattern: '^[1]\\d{10}$', message: '请输入正确的手机号', trigger: 'blur'}
        ],
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'}
        ],
        email: [
          {required: true, message: '请输入邮箱', trigger: 'blur'},
          {
            pattern: '^[\u4e00-\u9fa5a-zA-Z0-9\\._-]+@[a-zA-Z0-9_-]+(\\.[a-zA-Z0-9_-]+)+$',
            message: "请输入正确的邮箱",
            trigger: "blur"
          }
        ],
        password: [
          {
            pattern: '^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)[\\s\\S]{8,16}$',
            message: '至少有一个大写字母，一个小写字母，一个数字，总长度在8-16位',
            trigger: 'blur'
          },
          {
            validator: validatePass,
            message: '请输入正确的密码',
            trigger: 'blur'
          }
        ],
        password2: [
          {required: true, validator: validatePass2, trigger: 'blur'}
        ]
      }
    }
  },
  setup() {
    const {proxy} = getCurrentInstance()
    const registerNew = (formName) => {
      proxy.$refs[formName].validate((valid) => {
        console.log("formName is {}", valid)
        if (valid) {
          proxy.$service.register({
            mobile:proxy.registerForm.mobile,
            username:proxy.registerForm.username,
            password:proxy.registerForm.password,
            password2:proxy.registerForm.password2,
            email:proxy.registerForm.email
          }).then(result=>{
            let res=result.res
            if (res.code===0){
              proxy.$router.push('/login')
            }else{
              ElMessage.error(res.msg)
            }
          })
        }
      })
    }
    return {proxy, registerNew}
  }
}
</script>

<style >
.center {
  padding: 30px;
}

span h2 {
  font-size: medium;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}

.alert-info {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
  vertical-align: middle;
  font-size: 12px;
}

.alert {
  text-align: left;
  padding: 15px 5px 15px 5px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}

ol {
  list-style: none none;
  text-align: left;
  padding: 0px;
}

ol li {
  text-align: left;
}
</style>